<template>
    <div v-if="!isDb" @click="dialogVisible = true">
        <slot name="button"></slot>
    </div>
    <div v-if="isDb" @dblclick="dialogVisible = true">
        <slot name="button"></slot>
    </div>

    <el-dialog v-model="dialogVisible" :title="title" :width="width" :height="height" :style="style" draggable
        :close-on-press-escape="false" :close-on-click-modal="false">
        <slot></slot>
        <template #footer>
            <slot name="footer"></slot>
        </template>

    </el-dialog>
</template>
  
<script>
export default {
    name: 'CommonDialog',
    emits: ['returnData'],
    components: {
    },
    props: {
        title: String,
        width: String,
        height: String,
        isClose: Boolean,
        style: {
            default: {
            }
        },
        isDb: {
            default: false,
            type: Boolean
        }
    },
    data() {
        return {
            dialogVisible: false,
        }
    },
    mounted() {

    },
    methods: {

    },
    watch: {
        isClose: {
            handler() {
                this.dialogVisible = !this.dialogVisible
            }
        },
        dialogVisible(value) {
            if (value)
                return this.$emit('returnData', value)
        }
    },
    computed: {

    }

}
</script>
<style scoped></style>

  